@function p($px) {
    @return $px/2*1px;
}
* {
    margin: 0;
    padding: 0;
}

.indexM {
    .fp-controlArrow {
        display: none;
    }
    
    .slide {
        position: relative;
        background: url(../img/neiye/common/check-bg1.png) no-repeat;
        background-size: cover;
        .back {
            display: block;
            width: p(100);
            line-height: p(50);
            background: #00d2ff;
            border-radius: p(24);
            color: #fff;
            font-size: p(26);
            text-align: center;
            margin-left: p(46);
            margin-top: p(40);
        }
        .ti1 {
            width: p(561);
            height: p(34);
            margin-top: p(26);
            margin-left: p(46);
        }
        .imgBox {
            text-align: center;
            position: relative;
            z-index: 1;
            
        }
        .yunBox {
            width: 100%;
            margin-top: p(-100);
            height: p(145);
            vertical-align: middle;
            position: relative;
            .yun-1 {
                width: p(112);
                height: p(83);
                position: absolute;
                top: p(0);
                right: p(-10);
                animation-name: yun-1-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 40s;
                animation-timing-function: ease-in-out;
                
                /*动画结束位置在动画最后*/
                animation-iteration-count:infinite;
            }
            .yun-2 {
                width: p(64);
                height: p(47);
                position: absolute;
                top: p(34);
                left: p(35);
                animation-name: yun-1-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 30s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                /*动画结束位置在动画最后*/
                animation-iteration-count:infinite;
            }
            .yun-3 {
                width: p(111);
                height: p(82);
                position: absolute;
                top: p(45);
                left: p(450);
                animation-name: yun-1-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 10s;
                animation-timing-function: ease-in-out;
                
                animation-iteration-count:infinite;
                animation-direction: alternate-reverse;
                z-index: 2;
            }
            .yun-4 {
                width: p(84);
                height: p(62);
                position: absolute;
                top: p(48);
                left: p(360);
                animation-name: yun-1-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 30s;
                animation-timing-function: ease-in-out;
                
                /*动画结束位置在动画最后*/
                animation-iteration-count:infinite;
            }
            .yun-5 {
                width: p(63);
                height: p(46);
                position: absolute;
                top: p(40);
                left: p(300);
                animation-name: yun-1-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 20s;
                animation-timing-function: ease-in-out;
                animation-iteration-count:infinite;
                animation-direction: alternate-reverse;
            }
            // 云效果
            @keyframes yun-1-donghua {
                0%{
                    transform: translateX(0);
                }100%{
                    transform: translateX(-200px)
                }
            }
        }
        .xuanxiang {
            height: p(526);
            position: relative;
            font-size: p(26);
            .xx {
                width: p(367);
                height: p(63);
                display: block;
                background: url(../img/neiye/common/bg1-1.png) no-repeat;
                background-size: cover;
                margin-bottom: p(28);
                margin-left: p(57);
                overflow: hidden;
                p {
                    display: block;
                    color: #000;
                    font-weight: bold;
                    margin: p(8) 0 0 p(22);
                }
            }
            .xx:hover{
                background: url(../img/neiye/common/hover-bg.png) no-repeat;
                background-size: cover;
            }
            .A {
                margin-top: p(84);
            }
            .dog {
                display: block;
                width: p(83);
                height: p(92);
                position: absolute;
                bottom: p(160);
                right: p(70);
                z-index: 1;
            }
            .yinfu1 {
                width: p(90);
                height: p(100);
                position: absolute;
                right: p(60);
                bottom: p(155);
                animation-name: yinfu-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 6s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-delay: 0s;
            }
            .yinfu2 {
                width: p(59);
                height: p(58);
                position: absolute;
                right: p(80);
                bottom: p(165);
                animation-name: yinfu-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 6s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-delay: 1s;
            }
            .yinfu3 {
                width: p(56);
                height: p(50);
                position: absolute;
                right: p(80);
                bottom: p(165);
                animation-name: yinfu-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 6s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-delay: 2s;
            }
            .yinfu4 {
                width: p(56);
                height: p(47);
                position: absolute;
                right: p(80);
                bottom: p(165);
                animation-name: yinfu-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 6s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-delay: 3s;
            }
            .yinfu5 {
                width: p(51);
                height: p(54);
                position: absolute;
                right: p(80);
                bottom: p(165);
                animation-name: yinfu-donghua;
                -webkit-animation-duration: 1s;
                animation-duration: 6s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-delay: 4s;
            }
            // 音符动画
            @keyframes yinfu-donghua{
                0%{
                    transform: translateY(0);
                }100%{
                    transform: translateY(-200px);
                    opacity: 0;
                }
            }
        }
    }
}